<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/common/taglibs.jsp"%>
<%@include file="/common/javascript.jsp" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>btable</title>
	
	<link href="${ctx}/static/jquery-week-calendar/css/smoothness/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/jquery-week-calendar/jquery.weekcalendar.css" rel="stylesheet" type="text/css"/>
	<script type='text/javascript' src='${ctx}/static/jquery-week-calendar/jquery-ui-1.8.11.custom.min.js'></script>
  	<script type='text/javascript' src='${ctx}/static/jquery-week-calendar/date.js'></script>
  	<script type='text/javascript' src='${ctx}/static/jquery-week-calendar/jquery.weekcalendar.js'></script>
	
<script type="text/javascript">
	var dialog;
	var $calendar;
	
	var mainform;
	
	var eventData = { 
			events : <c:out value="${jsons}" escapeXml="false" />
		};

	$(document).ready(function() {
		
		$(".l-toolbar-item").hover(function() {
			$(this).addClass("l-panel-btn-over");
		}, function() {
			$(this).removeClass("l-panel-btn-over");
		});
		
		$(".l-item").click(function() {
			toolbarBtnItemClick($(this));
		});
		
		var date = new Date();
		date.setHours(8);
		$calendar = $('#calendar').weekCalendar({
			date: date,
			businessHours: {start: 8, end: 21, limitDisplay: true},
      		timeslotsPerHour: 4,
      		scrollToHourMillis : 0, 
            textSize: 10,
            firstDayOfWeek : 1,
			showHeader: false,
			showHeaderDate:false,
            readonly: true,
			buttons: false,
			dateFormat: "Y年n月j日",
			timeFormat: "a h:i",
			timeSeparator: " - ",
      		height: function($calendar){   
        		return $(window).height() - $('p').outerHeight(true) - 48;
      		},
		      eventClick : function(calEvent, $event) {

		         if (calEvent.readOnly) {
		            return;
		         }
		         dialog=$.ligerDialog.open({url: '${ctx}/qso/btable/add?id='+calEvent.id,height:250, 
		        		 width:600, showMax: true, showToggle: true, showMin: true, isResize: true,
		        		 modal: true, title:"维护"});
		      },
		      data: function(start, end, callback){
		    	  callback(eventData);
		      }
		   });


		   $("#event_edit_container").hide();
		   
		   $("#pageloading").hide();
		   
	});
	
	function process(){
		var roomId=$("#roomId").val();
		$.ajax({
			type:"POST",
			url:"${ctx}/qso/btable/listjson?roomid="+roomId,
			success:function(data){
				eventData={events:eval('(' + data + ')')};
				$('#calendar').weekCalendar("refresh");
			}
		});
	}
	
	function toolbarBtnItemClick(item) {
		switch (item.attr("toolbarid")) {
		case "add":
			dialog=$.ligerDialog.open({url: '${ctx}/qso/btable/newadd?id='+$("#roomId").val(),
					height:480, width:750, showMax: true, showToggle: true, showMin: true, 
					isResize: true, modal: true, title:"按课程添加"});
			break;
		}
	}
	
	 function saveDoneCallBack(){
		process();
		$('#calendar').weekCalendar("refresh");
     	dialog.close();
     }
	 
	 function onRoomChange(){
		 process();
		 $('#calendar').weekCalendar("refresh");
	 }
	
</script>

</head>
<body style="padding:0px; overflow:hidden;"> 
<div class="l-loading" style="display:block" id="pageloading"></div> 
	<div style="width: 99%; left: 20px" id="mainsearch">
		<div style="width: 100%;float: left; height:40px;" class="l-panel-topbar l-toolbar">
			<div style=" padding: 10px;float: left;">
				<span style=" left: 10px;"> 教室选择:</span> 
				<select style="width: 180px" name="roomId"
					id="roomId" ltype="select" onchange="onRoomChange()">
					<c:forEach items="${roomlist}" var="room">
						<option value="${room.crmId}">${room.crmTitle}</option>
					</c:forEach>
				</select>
			</div>
			<div class="l-item l-panel-btn l-toolbar-item-hasicon" toolbarid="add"  style="right: 10px;float: right;" >
				<span style="float: right; margin-top: 5px"> 按课程新增</span>
				<div  style="float: right;" class="l-panel-btn-l"></div>
				<div  style="float: right;" class="l-panel-btn-r"></div>
				<img style="float: right; margin-top: 7px" align="right" src="${ctx}/static/icons/silkicons/add.png"/>
				
			</div>
		</div>
	</div>

	<div id='calendar' style="width: 99%"></div>
	
	<div style="display:none;"></div>
 
</body>
</html>
